<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">账户明细</div>
                <div class="fls"></div>
            </div>
            <!-- <div class="miangxi">
                <van-dropdown-menu active-color="#1989fa">
                    <van-dropdown-item v-model="value1" :options="option1" />
                    <van-dropdown-item v-model="value2" :options="option2" />
                </van-dropdown-menu>
            </div> -->

            <div class="headertypes">
                <!-- <div class="undata">
                    <van-popover
                    v-model="showPopover"
                    trigger="click"
                    :actions="actions"
                    @select="onSelect"
                    >
                    <template #reference>
                        <div class="inset">{{left_title}}</div>
                    </template>
                    </van-popover>
                    <img src="../../../static/images/Frame.png" alt="">
                </div> -->

                <div class="undata">
                    <van-dropdown-menu z-index='999' :close-on-click-outside='false'>
                        <van-dropdown-item title="筛选" ref="item">
                            <van-cell center title="开始时间">
                                <template #right-icon>
                                    <div class="ninte" @click="show = true">{{startAt}}</div>
                                </template>
                            </van-cell>
                            <van-cell center title="结束时间">
                                <template #right-icon>
                                    <div class="ninte" @click="endAt()">{{endstartAt}}</div>
                                </template>
                            </van-cell>
                            <div style="padding: 5px 16px;">
                            <van-button type="danger" block round @click="onConfirm">
                                确认
                            </van-button>
                            </div>
                        </van-dropdown-item>
                    </van-dropdown-menu>
                </div>

                <div class="undata intbbs">
                    <van-popover v-model="showPopover_right" @select="onSelect_right" trigger="click" :actions="actions_right" @open="guanbsn()">
                        <template #reference>
                            <div class="inset">{{reft_title}}</div>
                        </template>
                    </van-popover>
                    <img src="../../../static/images/Frame.png" alt="">
                </div>
            </div>
        </van-sticky>

        <div class="headeeing">
            <div class="c_headef">
                <div class="one" @click="timer()">
                    <div>时间</div>
                    <img v-if="timerstypr == 0" class="inagevs" src="../../../static/images/iocn-sort-down.png" alt="">
                    <img v-if="timerstypr == 1"  class="inagevs" src="../../../static/images/iocn-sort-up.png" alt="">
                </div>
                <div class="two">类型</div>
                <div class="thress" @click="manny()">
                    <div>金额(元)</div>
                    <img v-if="mannytype == 0"  class="inagevs" src="../../../static/images/iocn-sort-down.png" alt="">
                    <img v-if="mannytype == 1"  class="inagevs" src="../../../static/images/iocn-sort-up.png" alt="">
                </div>
            </div>
            <div class="intbnt" v-for="(item,index) in uc_btn" :key="index">
                <div class="b_one">{{item.updateAt | formatDate}}</div>
                <div class="b_two">
                    <!-- 分润记录 -->
                    <img v-if="item.type == 'WITHDRAW' " class="showicon" src="../../../static/images/icon-qb-yetx.png" alt="">
                    <!-- 提现 -->
                    <img v-if="item.type == 'PROFIT' " class="showicon" src="../../../static/images/icon-frjl.png" alt="">
                    <!-- 活动奖励 -->
                    <img v-if="item.type == 'ACTIVITY' " class="showicon" src="../../../static/images/sdas.png" alt="">
                </div>
                <div class="b_thress">{{item.amount}}</div>
            </div>
        </div>

        <!-- 开始时间 -->
        <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
            <van-datetime-picker v-model="currentDate" type="date" @cancel="show = false" @confirm='confirm' title="选择开始时间" :min-date="minDate" :max-date="maxDate" />
        </van-popup>

        <!-- 结束时间 -->
        <van-popup v-model="endshow" position="bottom" :style="{ height: '30%' }" >
            <van-datetime-picker v-model="endcurrentDate" type="date" @cancel="endshow = false" @confirm='endconfirm' title="选择结束时间" :min-date="endminDate" :max-date="endmaxDate" />
        </van-popup>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Notify } from 'vant';
import {formatDate} from '../../../static/js/formatDate.js'

import Vue from 'vue'
import api from '../../api/PublicInterface'
Vue.prototype.$api = api
export default {
    filters: {
      formatDate(time) {
        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd')
      }
    },
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#fff')
    },
    data() {
        return {
            // 开始时间
            startAt:'请选择开始时间',//
            minDate: new Date(1960, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
            show:false,

            // 结束时间
            endstartAt:'请选择结束时间',//
            endminDate: new Date(1960, 0, 1),
            endmaxDate: new Date(2025, 10, 1),
            endcurrentDate: new Date(),
            endshow:false,



            showPopover: false,
            left_title:'近30天',
            // 通过 actions 属性来定义菜单选项
            actions: [{ text: '近30天' }, { text: '近3个月' }, { text: '近6个月' }],

            showPopover_right: false,
            reft_title:'全部类型',
            actions_right: [
                { text: '全部类型', icon: '../../../static/images/icon-qblx.png' },
                { text: '提现记录', icon: '../../../static/images/icon-qb-yetx.png' },
                { text: '分润记录', icon: '../../../static/images/icon-frjl.png' },
                { text: '活动奖励', icon: '../../../static/images/sdas.png' },
            ],
            uc_btn:[],
            // 时间
            timerstypr:0,
            // 金额
            mannytype:0,

            actionText:'',//类型
            sort:'createAt,asc',// 时间金钱排序

            kaishi:'',
            jieshu:''
        };
     },
     mounted(){
         this.withdrawApplies(); //账单查询接口
     },
     methods:{
         formatDate(time) {
            // time = time * 1000
            let date = new Date(time)
            return formatDate(date, 'yyyy-MM-dd')
        },
        // 账单查询接口
        withdrawApplies(){
            if(this.startAt == '请选择开始时间'){
                this.kaishi = ''
            }
            if(this.endstartAt == '请选择结束时间'){
                this.jieshu = ''
            }
            const data = {
                startAt:this.kaishi,//开始日期
                endAt:this.jieshu,//结束日期
                type:this.actionText,//账单类型. 提现: WITHDRAW; 分润: PROFIT; 活动奖励: ACTIVITY
                sort:this.sort,//时间金钱排序
            }
            this.$api.withdrawApplies(data).then((res)=>{
                if(res.status == '0000'){
                    this.uc_btn = res.payload.content
                }
            })
        },
        
        //  开始时间 确定
         confirm(){
             this.show = false;
             let yy = new Date(this.currentDate).getFullYear();
             let mm = new Date(this.currentDate).getMonth()+1;
             let dd = new Date(this.currentDate).getDate();
             this.startAt = yy +'-'+ mm +'-'+ dd +' '+'00'+':'+'00'+':'+'00';
             this.kaishi = yy +'-'+ mm +'-'+ dd +' '+'00'+':'+'00'+':'+'00';
             this.endcurrentDate = this.currentDate
         },
         
         //  打开结束时间弹框
        endAt(){
            if(this.startAt == '请选择开始时间'){
                Notify({ type: 'danger', message: '请先选择开始时间' });
                return;
            }
            this.endshow = true;
        },

         //  结束时间 确定
         endconfirm(){
             let yy = new Date(this.endcurrentDate).getFullYear();
             let mm = new Date(this.endcurrentDate).getMonth()+1;
             let dd = new Date(this.endcurrentDate).getDate();
             this.endstartAt = yy +'-'+ mm +'-'+ dd +' '+'23'+':'+'59'+':'+'59'
             this.jieshu = yy +'-'+ mm +'-'+ dd +' '+'23'+':'+'59'+':'+'59'
             this.endshow = false;
         },

        //  筛选确定
         onConfirm() {
            if(this.startAt == '请选择开始时间'){
                Toast('请选择开始时间')
                return;
            }
            if(this.endstartAt == '请选择结束时间'){
                Toast('请选择结束时间')
                return;
            }
            this.withdrawApplies(); //账单查询接口
           this.$refs.item.toggle();
         },
         guanbsn(){
             if(this.$refs.item.showPopup == true){
                 this.$refs.item.toggle();
             }
         },
        //  左边选项
         onSelect(action) {
             Toast(action.text);
             this.left_title = action.text
        },
        // 右边选项
        onSelect_right(action){
            Toast(action.text);
            if(action.text == '全部类型'){
                this.actionText = ''
            }
            if(action.text == '提现记录'){
                this.actionText = 'WITHDRAW'
            }
            if(action.text == '分润记录'){
                this.actionText = 'PROFIT'
            }
            if(action.text == '活动奖励'){
                this.actionText = 'ACTIVITY'
            }
            this.reft_title = action.text
            this.withdrawApplies(); //账单查询接口
        },
        //  时间
         timer(){
             if(this.timerstypr == 0){
                 this.timerstypr = 1
                 this.sort = 'createAt,asc'
             }else{
                 this.timerstypr = 0
                 this.sort = 'createAt,desc'
             }
             this.withdrawApplies(); //账单查询接口
         } ,
        //  金额
        manny(){
             if(this.mannytype == 0){
                 this.mannytype = 1
                 this.sort = 'amount,asc'
             }else{
                 this.mannytype = 0
                 this.sort = 'amount,desc'
             }
             this.withdrawApplies(); //账单查询接口
         },

        
     }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }

    .headeeing{
        width: 100%;
        padding: 16px;
        box-sizing: border-box;
    }

    .c_headef{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F9FAFF;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .inagevs{
        width: 12px;
        height: 12px;
        margin-left: 4px;
    }
    .c_headef>.one{
        width: 34%;
        height: 100%;
        display: flex;
        align-items: center;
        padding-left: 24px;
    }
    .c_headef>.two{
        width: 28%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .c_headef>.thress{
        width: 32%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 24px;
    }
    
    .intbnt{
        width: 100%;
        height: 48px;
        border-bottom: 1px dashed #BDBDBD;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        box-sizing: border-box;
    }
    .b_one{
        width: 33%;
    }
    .b_two{
        width: 33%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .b_thress{
        width: 33%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .showicon{
        width: 24px;
        height: 24px;
    }

    .headertypes{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content:  space-between;
        background: #fff;
        box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
    }

    .intbbs{
        box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
        background: #FFFFFF !important;
    }


    .undata{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000000;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 15px;
        letter-spacing: 0px;
    }
    .undata>img{
        width: 20px;
        height: 20px;
        margin-left: 16px;
    }
    .inset{
        width: 100%;
        height: 100%;
    }


    .van-dropdown-menu{
        width: 100% !important;
        box-shadow:0 0 0  !important;
    }
    
    .ninte{
        width: 60%;
        height: 100%;
        display: flex;
        align-items: center;
        color: #323233;
        font-size: 14px;
        justify-content: flex-end;
    }
</style>